/**
 * Copyright (c) 2018-present, Chen Guodong
 * All rights reserved.
 *
 * @flow
 */

// 全年进度

<template>
  <div class="modal-box">
    <p class="title">
      <b class="left">项目资金进度(万元)</b>
    </p>
    <div class="main">
      <v-chart auto-resize :options="options" style="width: 100%;height: 100%;" theme="macarons" ref="chart"/>
    </div>
  </div>
</template>

<script>
import ECharts from "vue-echarts";
import { reqMoneySpeed, reqMoneySpeedDay } from "../../api/index.js";

const getChartOptions = data => {
  if (!data) return data;
  let chartOptions = {
    grid: {
      top: "6%",
      left: "3%",
      right: "4%",
      bottom: 15,
      containLabel: true
    },
    tooltip: {
      trigger: "axis"
      // formatter: "{b0}</br>{a0}: {c0}<br />{a1}: {c1}"
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: data.labels
    },
    yAxis: {
      type: "value"
    },
    dataZoom: [
      {
        show: true,
        realtime: true,
        start: 0,
        end: 50,
        handleIcon:
          "M512 512m-245.45454521484373 0a10.546875 10.546875 0 1 0 490.9090913085937 0 10.546875 10.546875 0 1 0-490.9090913085937 0Z",
        // handleSize: 8,
        height: 8,
        bottom: 5,
        fillerColor: "#ddd",
        textStyle: {
          color: "#616161",
          fontSize: 12
        },
        // left: 55,
        // right: 55,
        showDetail: false,
        showDataShadow: true
      },
      {
        type: "inside",
        realtime: true,
        start: 0,
        end: 50
      }
    ],
    series: [
      {
        name: "项目资金进度",
        data: data.amounts && data.amounts.length > 0
            ? data.amounts.map(item => (item / 10000).toFixed(2))
            : [],
        type: "line",
        areaStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "rgba(81, 153, 255,1)" // 0% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(81, 153, 255,0.3)" // 100% 处的颜色
              }
            ],
            globalCoord: false // 缺省为 false
          }
        }
      }
    ]
  };
  return chartOptions;
};

export default {
  props: {
    title: String,
    chartData: [Array, Object],
    selecte: Boolean
  },
  data() {
    return {
      options: getChartOptions(this.chartData),
      selected: 1 // 0:月, 1: 日
    };
  },
  watch: {
    chartData: function(data) {
      this.options = getChartOptions(data);
    }
  },
  methods: {
    async changeSelecte(data) {
      const self = this;
      this.selected = data;
      if (data === 0) {
        const data = await reqMoneySpeed({
          seqno: self.$router.history.current.query.seqno
        });
        if (data.code === 1) {
          this.options = getChartOptions(data.data);
        } else {
          console.log("错误提示:" + data.msg);
        }
      } else {
        const data = await reqMoneySpeedDay({
          seqno: self.$router.history.current.query.seqno
        });
        if (data.code === 1) {
          this.options = getChartOptions(data.data);
        } else {
          console.log("错误提示:" + data.msg);
        }
      }
    }
  },
  mounted() {
    const self = this;
    // const chartOption = ;
    // this.options = chartOption;\
    console.log('chartData', this.chartData)
    // 动态变化
    let chartObj = self.$refs.chart;
    self.startPersent = 0;
    setInterval(function() {
      // 取消之前高亮的图形
      chartObj.dispatchAction({
        type: "dataZoom",
        start: self.startPersent,
        end: self.startPersent + 50
      });
      self.startPersent = self.startPersent + 10;
      if (self.startPersent > 50) {
        self.startPersent = 0;
      }
    }, 3000);
  },
  components: {
    "v-chart": ECharts
  }
};
</script>

<style lang='less' scoped>
// @import '../../util/theme.less'

.main{
  height: 130px;
  width: 100%;
}

// title右侧样式
.legend-box {
  b {
    font-size: 1.3rem;
    padding: 0 6px;
    color: #fff;
    cursor: pointer;
  }
  .active {
    color: #3cd686;
  }

  // .legend-item {
  //   margin-right: 0.5vw;
  //   i {
  //     margin-right: 0.5vw;
  //   }
  // }
  // .plan {
  //   color: @color1;
  //   i {
  //     color: @color1;
  //   }
  // }
  // .reality {
  //   color: @color2;
  //   i {
  //     color: @color2;
  //   }
  // }
}
</style>
